import {Layout} from '../../src/Layout';
import {StaticTable} from '../../src/StaticTable';
import {Command} from '../../src/Command';
import {Link} from '@react-spectrum/s2';
export default Layout;

export const section = 'Guides';
export const description = 'How to use the React Aria MCP Server.';
export const tags = ['mcp', 'ai', 'documentation', 'tools'];

# MCP Server

<PageDescription>Learn how to use the React Aria [MCP](https://modelcontextprotocol.io/docs/getting-started/intro) server to help AI agents browse the documentation.</PageDescription>

## Using with an MCP client

Add the server to your MCP client configuration (the exact file and schema may depend on your client).

```js
{
  "mcpServers": {
    "React Aria": {
      "command": "npx",
      "args": ["@react-aria/mcp@latest"]
    }
  }
}
```

### Cursor

<Link href="cursor://anysphere.cursor-deeplink/mcp/install?name=React%20Aria&config=eyJjb21tYW5kIjoibnB4IEByZWFjdC1hcmlhL21jcEBsYXRlc3QifQ%3D%3D" aria-label="Add to Cursor">
  <picture>
    <source srcSet="https://cursor.com/deeplink/mcp-install-dark.svg" media="(prefers-color-scheme: light)" />
    <source srcSet="https://cursor.com/deeplink/mcp-install-light.svg"  media="(prefers-color-scheme: dark)" />
    <img src="https://cursor.com/deeplink/mcp-install-light.svg" alt="Add to Cursor" />
  </picture>
</Link>

Or follow Cursor's MCP install [guide](https://docs.cursor.com/en/context/mcp#installing-mcp-servers) and use the standard config above.

### VS Code

<Link href="vscode:mcp/install?%7B%22name%22%3A%22React%20Aria%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22%40react-aria%2Fmcp%40latest%22%5D%7D" aria-label="Add to Visual Studio Code">
  <img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in Visual Studio Code" />
</Link>

Or follow VS Code's MCP install [guide](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server) and use the standard config above. You can also add the server using the VS Code CLI:

<Command command='code --add-mcp &#39;{"name":"React Aria","command":"npx","args":["@react-aria/mcp@latest"]}&#39;' />

### Claude Code

Use the Claude Code CLI to add the server:

<Command command="claude mcp add react-aria npx @react-aria/mcp@latest" />

For more information, see the [Claude Code MCP documentation](https://docs.claude.com/en/docs/claude-code/mcp).

### Codex

Create or edit the configuration file `~/.codex/config.toml` and add:

```js
[mcp_servers.react-aria]
command = "npx"
args = ["@react-aria/mcp@latest"]
```

For more information, see the [Codex MCP documentation](https://github.com/openai/codex/blob/main/docs/config.md#mcp_servers).

### Gemini CLI

Use the Gemini CLI to add the server:

<Command command="gemini mcp add react-aria npx @react-aria/mcp@latest" />

For more information, see the [Gemini CLI MCP documentation](https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md#how-to-set-up-your-mcp-server).

### Windsurf

Follow the Windsurf MCP [documentation](https://docs.windsurf.com/windsurf/cascade/mcp) and use the standard config above.
